<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="800" height="800"></canvas>
  <script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d')
  // 矩形
  ctx.fillStyle = 'red'
  ctx.fillRect(0, 0, 100, 100)
  
  // 线
  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.strokeStyle = 'blue'
  ctx.moveTo(100, 100) // 起点
  ctx.lineTo(200, 200)
  ctx.lineTo(300, 200)
  ctx.lineTo(200, 100)
  ctx.lineTo(100, 100)
  ctx.stroke()

  // 圆
  ctx.lineWidth = 2
  ctx.strokeStyle = 'green'
  ctx.fillStyle = 'red'
  ctx.beginPath()
  ctx.arc(300, 300, 100, 0, 2 * Math.PI) // 圆心、半径、起始、终止
  ctx.fill()
  ctx.stroke()
  </script>
</body>
</html>